JSX (JavaScript)
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
top
JSX (sometimes referred to as JavaScript XML) is an XML-like extension to the JavaScript language syntax.cite-ref-0-1-0[1] Initially created by Facebook for use with React, JSX has been adopted by multiple web frameworks.cite-ref-larsen-2-0[2]cite-ref-wieruch-3-0[3] Being a syntactic sugar, JSX is generally transpiled into nested JavaScript function calls structurally similar to the original JSX.
When used with TypeScript, the file extension is .tsx.cite-ref-4[4]
Contents
• Markup
• See also
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
Markup
Below is an example of JSX code:
const App = () => {
return (
<div>
<p>Header</p>
<p>Content</p>
<p>Footer</p>
</div>
);
}
Nested elements
Attributes
JSX provides a range of element attributes designed to mirror those provided by HTML. Custom attributes can also be passed to the component.cite-ref-7[7] All attributes will be received by the component as props.
JavaScript expressions
JavaScript expressions (but not statements) can be used inside JSX with curly brackets {}:cite-ref-wieruch-3-2[3]
<h1>{10+1}</h1>
The example above will render:
<h1>11</h1>
Conditional expressions
If–else statements cannot be used inside JSX but conditional expressions can be used instead. The example below will render { i === 1 ? 'true' : 'false' } as the string 'true' because i is equal to 1.
const App = () => {
const i = 1;
return (
<div>
<h1>{ i === 1 ? 'true' : 'false' }</h1>
</div>
);
}
The above will render:
<div>
<h1>true</h1>
</div>
Functions and JSX can be used in conditionals:cite-ref-wieruch-3-3[3]
const App = () => {
const sections = [1, 2, 3];
return (
<div>
{sections.map((n, i) => (
/* 'key' is a React-specific attribute for tracking of list items and their changes */
/* Each 'key' must be unique */
<div key={"section-" + n}>
Section {n} {i === 0 && <span>(first)</span>}
</div>
))}
</div>
);
}
The above will render:
<div>
<div>Section 1 <span>(first)</span></div>
<div>Section 2</div>
<div>Section 3</div>
</div>
Code written in JSX requires conversion with a tool such as Babel before it can be understood by web browsers.cite-ref-8[8]cite-ref-larsen2021-9-0[9] This processing is generally performed during a software build process before the application is deployed.
See also
References
cite-note-0-11. ↑ "Draft: JSX Specification". JSX. Facebook. Retrieved 7 April 2018.
cite-note-44. ↑ "Documentation - JSX". www.typescriptlang.org. Retrieved 2025-07-13.
cite-note-55. ↑ citerefclark2017Clark, Andrew (September 26, 2017). "React v16.0§New render return types: fragments and strings". React Blog.
cite-note-66. ↑ "React.Component: render". React.
cite-note-77. ↑ citerefclark2017Clark, Andrew (September 26, 2017). "React v16.0§Support for custom DOM attributes". React Blog.
External links